<template>
  <div class="flex-item" :style="mergeStyle">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name:'FlexItem',
  props:{
    order:{
      type:Number,
      default:undefined,
    },
    flex:{
      type:String,
      default:'none',//none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    },
    alignSelf:{
      type:String,
      default:undefined,
    }
  },
  data(){
    return {
      mergeStyle:{
        order:this.order,
        alignSelf:this.alignSelf,
        flex:this.flex,
      }
    }
  }
}
</script>